import 'package:flutter/material.dart';
import 'package:gesture_password/gesture_password.dart';
import 'package:gesture_password/mini_gesture_password.dart';
import 'function.dart';
import 'package:flutter/cupertino.dart';
class PasswordPage extends StatefulWidget {
  PasswordPage(this.mainColor);
  final Color mainColor;
  @override
  _PasswordPageState createState() => new _PasswordPageState();
}

class _PasswordPageState extends State<PasswordPage> {
  String tip = "绘制解锁图案";
  bool err = false;
  String firstPass="";
  String secondPass="";
  GlobalKey<MiniGesturePasswordState> miniGesturePassword = new GlobalKey<MiniGesturePasswordState>();

  GlobalKey<ScaffoldState> scaffoldState = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldState,
      appBar: new CupertinoNavigationBar(
        actionsForegroundColor: Colors.white,
        backgroundColor: widget.mainColor,
        border: new Border(bottom: BorderSide.none),
        middle: new Text(
          "设置手势密码",
          style: new TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.normal,
          ),
        ),
      ),
      body: new Column(
        children: <Widget>[
          new Center(
              child: new Column(
                children: <Widget>[
                  new SizedBox(
                    height: 50.0,
                  ),
                  new MiniGesturePassword(
                    key: miniGesturePassword,
                    attribute: new MiniItemAttribute(
                      normalColor: Colors.black54,
                      selectedColor: widget.mainColor,
                      smallCircleR: 4.0,
                    ),
                  ),
                  new Text(
                    this.tip,
                    style: new TextStyle(color: this.err ? Colors.red : Colors.black54),
                  )
                ],
              )),
          new LayoutBuilder(
            builder: (BuildContext ctx, BoxConstraints constraints) {
              return new Container(
                margin: const EdgeInsets.only(top: 20.0),
                child: new GesturePassword(
                  height:MediaQuery.of(context).size.width ,
                  attribute: new ItemAttribute(normalColor: Colors.black54,selectedColor: widget.mainColor,),
                  successCallback: (pass) {
                    if(firstPass==""){
                      firstPass=pass;
                      tip="再次绘制解锁图案";
                      err=false;
                    }else{
                      if(firstPass!=pass){
                        tip="与上次绘制不一致，请重新绘制";
                        err=true;
                      }else{
                        setStorage("gesture", pass);
                        toast("手势密码设置成功");
                        Navigator.of(context).pop(true);
                      }
                    }
                    setState(() {

                    });
                    miniGesturePassword.currentState?.setSelected('');
                  },
                  failCallback: () {
                    tip="至少连接4个点，请重新绘制";
                    err=true;
                    setState(() {

                    });
                    miniGesturePassword.currentState?.setSelected('');
                  },
                  selectedCallback: (str) {
                    miniGesturePassword.currentState?.setSelected(str);
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}
